<template>
	<view style="padding: 20upx;">
		<uni-forms :modelValue="formData">
			<uni-forms-item label="评价描述:" :border="border">
				<uni-rate v-model="formData.star" ></uni-rate>
			</uni-forms-item>
			<uni-forms-item label="评价内容:">
				<textarea v-model="formData.content" style="border: #888888 2upx solid;width: 100%;" placeholder="请输入评价内容"/>
			</uni-forms-item>
			
			<!-- <view>
				<block v-for="(item,index) in imageList" :key="index">
					{{item.name}}--{{item.url}}
				</block>
			</view> -->
			
			<uni-forms-item label="上传图片">
				<uni-file-picker 
					:auto-upload="false"
					:limit="6"
					v-model="imageValue" 
					fileMediatype="image" 
					mode="grid" 
					@select="select" 
					@progress="progress" 
					@success="success" 
					@delete="handleDelete"
					@fail="fail" 
				/>
				<button @click="cameraUpload">拍照</button>
			</uni-forms-item>
			<view style="display: flex;justify-content: space-between;">
				<text style="font-size: 20upx;color: #666666">注:要么选择图片，要么全部拍照</text>
				<view>
				<checkbox-group @change="checkboxChange">
						<checkbox  :check="formData.checkBox"></checkbox> <text>匿名评价</text>
					</checkbox-group> 
				</view>
			</view>
		</uni-forms>
		<button @click="submit">提交评论</button>
	</view>
</template>

<script>
	import {successdata} from '../../api/errdata.js'; // 请求路径
	import {getRequest, getPost} from '../../api/api.js'; // 请求接口
	import {memberComment} from '../../api/request.js'; // 请求路径
	
	export default {
		data() {
			return {
				imageList: [], // 保存上传保存的集合
				imageValue:[],
				
				// 表单数据
				formData: {
					orderId: 0,
					star: 0,
					content: 'dcloud@email.com',
					checkBox: false,
				}
			}
		},
		
		onLoad(options) {
			console.log(options);
			this.formData.orderId = options.orderId;
		},
		
		methods: {
			checkboxChange() {
				console.log("改变了");
				this.formData.checkBox =  !this.formData.checkBox;
			},
			
			// 获取上传状态
			async select(e){
				console.log('选择文件：',e)
				console.log(typeof e.tempFiles);
				console.log(e.tempFiles[0].name);
				const path = e.tempFilePaths.pop();
				console.log(path);
				 // await this.uploadImg(res.tempFilePaths); 
				// const [err, data] =  
				await uni.uploadFile({
				         url: "http://localhost:8009/image/upload/comment",
				         filePath: path,
				         name: 'file',
				         header: {
				             // Authorization: token,
				             "Content-Type": "multipart/form-data",
				         },
						 success:(res)=> {
							 // let tempFileObj = JSON.parse(path);
							 // console.log(tempFileObj);
							 console.log(res);
							 let urlData = JSON.parse(res.data)
							 console.log(urlData.data.filePath);
							 this.imageList.push({"name": e.tempFiles[0].name, "url":urlData.data.filePath});
							 console.log(this.imageList);
						 }
				});
				
				// this.imageList.push({name: '', e.tempFilePaths[0]});
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
				console.log(e.tempFilePaths[0]);
				// this.imageList.push({name: '', e.tempFilePaths[0]});
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			
			// 删除图片
			handleDelete(err) {
				console.log(this.imageValue);
				console.log("删除的图片"+err.tempFile.name);
				this.imageList = this.imageList.filter((e)=> {
					return e.name!=err.tempFile.name;
				})
			},
			
			// 触发提交表单
			submit() {
				console.log(this.imageValue);
				let picUrl = '';
				for(let i in this.imageList) {
					if(i == 0) {
						picUrl+=this.imageList[i].url;
					} else {
						picUrl+=","+this.imageList[i].url;
					}
				}
				
				let param = {
					star: this.formData.star,
					orderId: this.formData.orderId,
					buyerContent: this.formData.content,
					pictureUrl: picUrl,
					anonymousComment: this.formData.checkBox?1:0
				}
				// console.log(param);
				console.log("提交了评论")
				console.log(param);
				getPost(memberComment, param)
					.then((res)=> {
						successdata.success("评价成功");
						// 跳转到订单页，返回
						setTimeout(() => {
							uni.hideToast();
							//关闭提示后跳转
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
						
						console.log(res);
					})
					.catch((err)=> {
						
					})
				 
			},
			
			// 打开拍照
			cameraUpload() {
				console.log("点击了拍照");
				uni.chooseImage({
				  	count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
				    success: (res)=> {
						console.log("添加照片");
						const tempFilePaths = res.tempFilePaths[0];
						this.imageValue.push({'fileID':new Date(),'name':res.tempFilePaths[0],'url': res.tempFilePaths[0]});
						// this.imageList.push({"name": res.tempFilePaths[0], "url":res.tempFilePaths[0]});
						// console.log(this.imageList);
						
						
						const path = res;
						// console.log("------------------------------");
						// console.log(path);
						// console.log(path.tempFilePaths[0]);
						
						uni.uploadFile({
						         url: "http://localhost:8009/image/upload/comment",
						         filePath: path.tempFilePaths[0],
						         name: 'file',
						         header: {
						             // Authorization: token,
						             "Content-Type": "multipart/form-data",
						         },
								 success:(res)=> {
									let urlData = JSON.parse(res.data)
									// console.log(urlData);
									// console.log(path.tempFilePaths[0].name);
									this.imageList.push({"name": path.tempFilePaths[0], "url":urlData.data.filePath});
									
								 }
						});
				    }
				});
			}
		}
	}
</script>

<style scoped> 

</style>
